---
title: Slider
description: Sliders allow users to view and select a value (or range) from the range along a bar. They’re ideal for adjusting settings such as volume and brightness, or for applying image filters. Sliders can use icons on both ends of the bar to represent a numeric or relative scale. The range of values or the nature of the values, such as volume change, can be communicated with icons.
docType: Demo
docGroup: Components
group: Inputs
hooks: [useSlider]
components: [Slider]
---

# Slider

Sliders allow users to view and select a value (or range) from the range along a
bar. They’re ideal for adjusting settings such as volume and brightness, or for
applying image filters.

Sliders can use icons on both ends of the bar to represent a numeric or relative
scale. The range of values or the nature of the values, such as volume change,
can be communicated with icons.

## Horizontal Slider

The `Slider` is a fully controlled component requiring a `value` and a
`setValue` function. `react-md` provides a hook to help implement this
functionality for most use cases: `useSlider`.

```demo source="./HorizontalSlider.tsx"

```

### With Addons

Icons or other components can be rendered inline with the `Slider` by passing
them to the `beforeAddon` and `afterAddon` props.

```demo source="./HorizontalSliderWithAddons.tsx"

```

## Configuring useSlider

The `useSlider` hook can configure the `min`, `max`, `step`, and `defaultValue`.

```demo source="./ConfiguringUseSlider.tsx"

```

## Vertical Slider

Set the `vertical` prop to `true` to render a `Slider` vertically instead of
horizontally. The default height will be [$SASSDOC](slider-vertical-size) (`15rem`) but
can be configured by setting `--rmd-slider-vertical-size` or an inline `height`
style.

```demo source="./VerticalSlider.tsx"

```

### With Addons

Icons or other components can be rendered above or below the vertical `Slider`
by passing them to the `beforeAddon` and `afterAddon` props.

```demo source="./VerticalSliderWithAddons.tsx"

```

## Slider States

Unlike other form components, the `Slider` only supports a `disabled` state.

```demo source="./SliderStates.tsx"

```

## Range Slider

The `Slider` can support rendering with two thumbs that represent a range of
values. The easiest way is to control the value with the `useRangeSlider` hook.

```demo source="./RangeSlider.tsx"

```

### Vertical Range Slider

```demo source="./VerticalRangeSlider.tsx"

```

## Discrete Slider

The current value can be shown in a tooltip by enabling the `discrete` prop
which only appears while dragging or focused by default. The tooltip visibility
can be controlled by the `tooltipVisibility` prop as one of the following
values:

- `"auto"` (default) - only appears while dragging or focused
- `"hover"` - also appears while hovering the thumb
- `"always"` - always visible

```demo source="./DiscreteSlider.tsx"

```

### Customizing the Discrete Slider Tooltip

The discrete slider's tooltip props can be customized by using the `getTooltipProps`
function and the children can be customized by the `getTooltipChildren`
function.

```demo source="./CustomizingDiscreteSliderTooltip.tsx"

```

## Slider Marks

Marks can be added to help show specific values within the `Slider` by using the
`marks` prop. When set to `true`, a mark will be added for each step within the
range.

```demo source="./SliderMarks.tsx"

```

### Customizing Slider Marks

Marks can also be defined by providing a list of specific values within the
range and an optional value for each mark. If marks need additional
customization, the `getMarkLabelProps` can also be used.

```demo source="./CustomizingSliderMarks.tsx"

```

## Linked with a Text Field

The `useSlider` hook is not required to control the state of a `Slider` and can
be controlled as long as a `value` and `setValue` is provided. This allows the
slider to be controlled alongside a `TextField` with the `useNumberField` hook
or any other custom implementation.

```demo source="./LinkedWithATextField.tsx"

```

## Accessibility

The `Slider` follows the [slider](https://www.w3.org/WAI/ARIA/apg/patterns/slider/)
and [range slider](https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb/)
guidelines. The single-thumb slider will required to be labelled with
`aria-label` or `aria-labelledby` while the multi-thumb slider defaults to an
`aria-label` of `"Min"` and `"Max"` which can be configured by the
`minThumbLabel`/`minThumbLabelledBy` and `maxThumbLabel`/`maxThumbLabelledBy`
props.

In addition, the current slider value can be configured using
[aria-valuetext](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext)
to convert the value percentage into a human-readable text alternative using the
`getValueText` prop.

Once focused with a keyboard, the value can be updated by:

- `ArrowUp` -> increase the value by the `step` amount
- `ArrowDown` -> decrease the value by the `step` amount
- `Home` -> set the value to the `min` amount
- `End` -> set the value to the `max` amount
- `PageUp` -> increase the value by the `jump` amount
- `PageDown` -> decrease the value by the `jump` amount
